<script setup>
import { onMounted, ref } from 'vue';
import {queryPageApi} from '@/api/stu';
import {ElMessage} from 'element-plus';

//搜索条件
const searchStu = ref({
  name: '',
  degree: '',
  clazzId: '',
})
const page = ref(1);
const pageSize = ref(10);

//表格学生列表
const stuList = ref([]);

//当前页码改变执行
const handleCurrentChange = ()=>{
  search();
}
//展示页码条数改变时执行
const handleSizeChange = ()=>{
search();
}
//分页查询总数
const total = ref(0);

//条件分页查询
const search =async ()=>{
  const result = await queryPageApi(searchStu.value.name, searchStu.value.degree, searchStu.value.clazzId, page.value, pageSize.value)
if(result.code){
  total.value = result.data.total;
  stuList.value = result.data.rows;
  ElMessage.success('查询成功')
}else{
  ElMessage.error(result.message)
}
}

onMounted(()=>{
  search();
})
</script>

<template>
  <h1>学员管理</h1>

  <!--搜索栏-->
  <div class="header">
    <el-form :inline="true" :model="searchStu" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="searchStu.name" placeholder="请输入姓名" clearable />
      </el-form-item>

      <el-form-item label="最高学历">
        <el-select v-model="searchStu.degree" placeholder="请选择" clearable>
          <el-option label="初中" value="1" />
          <el-option label="高中" value="2" />
          <el-option label="大专" value="3" />
          <el-option label="本科" value="4" />
          <el-option label="硕士" value="5" />
          <el-option label="博士" value="6" />
        </el-select>
      </el-form-item>

      <el-form-item label="所属班级">
        <el-select v-model="searchStu.clazzId" placeholder="请选择" clearable>
          <el-option label="1" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="info" @click="clean">清空</el-button>
      </el-form-item>
    </el-form>
  </div>

  <!--2个按钮-->
  <div class="twoBtn">
    <el-button type="primary" @click="" style="width: 150px;">+添加学员</el-button>
    <el-button type="primary" @click="" style="width: 150px;">-批量删除</el-button>
  </div>


  <!--表格-->
  <el-table :data="stuList" border style="width: 100%">
    <el-table-column type="selection" width="55" align="center"/>
    <el-table-column prop="name" label="姓名" align="center"/>
    <el-table-column prop="no" label="学号" align="center" width="110px"/>
    <el-table-column prop="clazzid" label="班级" align="center"/>
    <el-table-column prop="gender" label="性别" align="center"/>
    <el-table-column prop="phone" label="手机号" align="center" width="150px"/>
    <el-table-column prop="degree" label="最高学历" align="center"/>
    <el-table-column prop="violationCount" label="违纪次数" align="center"/>
    <el-table-column prop="violationScore" label="违纪扣分" align="center"/>
    <el-table-column prop="updateTime" label="最后操作时间" align="center" width="200px"/>
    <el-table-column label="操作" width="250" align="center">
      <el-button type="primary" round>编辑</el-button>
      <el-button type="warning" round>违纪</el-button>
      <el-button type="danger" round>删除</el-button>
    </el-table-column>
  </el-table>

  <!--分页条-->
  <el-pagination
      v-model:current-page="page"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 40]"
      :background="true"
      layout="sizes,total,  prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />


</template>

<style scoped>
.header {
  margin: 20px 0;
}
.twoBtn {
  margin-bottom: 30px;
}
</style>